<template>
  <div class="bg-fff h-100p bdr-10 pd-10">
    <el-menu :default-active="activeRouter" mode="horizontal" class="bdr-top-10" in>
      <el-menu-item v-for="(item) in tabs" :key="item.value" :index="item.value+''"
                    @click.native="changeItem(item)">
        {{item.label}}
      </el-menu-item>
    </el-menu>
    <v-plain-table :native="{stripe:true}" :data="salesman" @change="change" class="bg-fff pd-10 bdr-10">
      <template slot="expand" slot-scope="{scope}">
        <el-button type="text" v-if="showAuditBtn" @click="showAudit(scope.row)">审核</el-button>
      </template>
    </v-plain-table>
    <v-audit-0 ref="audit-0" @initList="getMember"/><!-- 证件信息 -->
    <v-audit-1 ref="audit-1" @initList="getMember"/><!-- 经办人信息 -->
    <v-audit-2 ref="audit-2" @initList="getMember"/><!-- 账号绑定 -->
    <v-audit-3 ref="audit-3" @initList="getMember"/><!-- 证件信息 -->

  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vPlainTable from '@/components/plain-table'
  import vAudit1 from '../audit/process-1'
  import vAudit2 from '../audit/process-2'
  import vAudit3 from '../audit/process-3'
  import vAudit0 from '../audit/process-0'
  import { Getter } from 'vuex-class'

  @Component({
    components: {
      vPlainTable,
      vAudit1,
      vAudit2,
      vAudit3,
      vAudit0
    }
  })
  export default class Member extends Vue {
    userId: ''
    salesman: TableData = {
      header: [
        {
          label: '账号',
          key: 'username'
        },
        {
          label: 'id',
          key: 'id'
        },
        {
          label: '企业名称',
          key: 'enterpriseName'
        },
        {
          label: '联系方式',
          key: 'phone'
        },
        {
          label: '审核状态',
          key: 'certificationStatus',
          formatter: row => this.$utils.toTypeFormat(row.certificationStatus, this.$dict.memberAuditTypes)
        },
        {
          label: '创建日期',
          key: 'createTime',
          formatter: row => this.$utils.toTimeFormat(row.createTime)
        }
      ],
      body: [],
      footer: {
        total: 0,
        currentPage: 1
      }
    }
    url = ''
    f = {}
    @Getter userInfo

    get activeRouter () {
      if (this.reviewStatus === '') {
        return ''
      }
      return this.reviewStatus + ''
    }

    get showAuditBtn () {
      if (this.reviewStatus === '' || this.reviewStatus === 4) {
        return false
      }
      if (this.userInfo.roleType === 3 || this.userInfo.roleType) {
        return true
      }
      return false
    }

    reviewStatus = ''
    tabs = [
      {
        label: '全部',
        value: ''
      },
      {
        label: '实名认证',
        value: 0
      },
      {
        label: '业务授权',
        value: 1
      },
      {
        label: '对公账号绑定',
        value: 2
      },
      // {
      //   label: '待小额鉴定',
      //   value: 3
      // },
      {
        label: '认证完成',
        value: 4
      }
    ]

    changeItem (item) {
      this.reviewStatus = item.value
      this.getMember()
    }

    async getMember () {
      if(this.userInfo.roleType == 1 || this.userInfo.roleType == 3 || this.userInfo.roleType == 6){
        this.f = {
          pageSize: 10,
          currentPage: this.salesman.footer.currentPage,
          userId: this.userId,
          reviewStatus: this.reviewStatus
        }
      }else{
        this.f = {
          pageSize: 10,
          currentPage: this.salesman.footer.currentPage,
          userId: this.userId,
          certificationStatus: this.reviewStatus
        }
      }
      if(this.$route.params.id){
        this.url = 'b/boms/member/channelsalesman/members'
      }
      let res: AjaxResponse = await this.$axios.post(this.url, this.f)
      this.salesman.body = res.data.items
      this.salesman.footer.total = res.data.totalNum
      this.salesman.footer.currentPage = res.data.currentPage
    }

    mounted () {
      let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
      this.userId = this.$route.params.id || userInfo.userId
      switch (userInfo.roleType) {
        case 1: // 大掌柜
          this.url = 'b/boms/member/treasurer/members'
          break
        case 3: // 渠道专员
          this.url = 'b/boms/member/channelcommissioner/members'
          break
        case 6: // 渠道专员
          this.url = 'b/boms/member/channelcommissioner/members'
          break
        case 4: // 渠道业务员
          this.url = 'b/boms/member/channelsalesman/members'
          break
        case 8: // 渠道业务员
          this.url = 'b/boms/member/channelsalesman/members'
          break
        case 5: // 渠道商
          this.url = 'g/gateway/channelprovider/member/list'
          break
      }
      this.getMember()
    }

    change (page) {
      this.salesman.footer.currentPage = page
      this.getMember()
    }

    async showAudit (row) {
      let res: AjaxResponse = await this.$axios.get(`g/gateway/member/${row.id || row.enterpriseUserId}`)
      this.$refs[`audit-${this.reviewStatus}`].openDialog(res.data)
    }
  }
</script>

<style lang="less" scoped>
  .bdr-top-10 {
    margin-bottom: 10px;
  }
</style>
